<template>
    <div>
        <header class="header">
            <el-button @click="$router.push('/student/homework/card')" icon="left" type="text" class="back-button">
                <img src="@/assets/svgs/left.svg" alt="Back" />
            </el-button>
            <span class="title" style="margin-left: 10px;">AIGC作业</span>
            <p class="title2">2024.12.26 第一次作业</p>
            <p class="title3">截止提交时间: 12月26日 23:59</p>
            <button class="submit-button" @click="submitAll">提交作业</button>
        </header>
        <div class="assignment-content">
            <h3>题目一（100分）</h3>
            <p style="color: #4B5563;">软件工程的重要环节和内容</p>
            <div class="assignment-actions">
                <button class="input-button" @click="submitText">文本方式<br>支持键盘输入</button>
                <button class="attachment-button" @click="submitAttachment">附件方式<br>支持doc、docx文件上传</button>
            </div>
        </div>
        <textarea name="1" id="1" v-model="assignmentText" rows="20" cols="50" class="textarea"></textarea>
        <div class="correct_button">
            <button class="correct_button1" @click="goToPrevious">上一题</button>
            <button class="correct_button1" @click="goToNext">下一题</button>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const submitAll = () => {
  ElMessage.success('提交作业成功');
  router.push('/student/homework/card');
};
</script>



<style scoped>
.header {
    color: white;
    height: 30px;
    padding: 10px;
    display: flex;
    align-items: center;
    background-color: #13227a;
    justify-content: flex-start;
    /* 修改为左对齐 */
}

.back-button {
    color: white;
    border: none;
    width: 25px;
    height: 25px;
}

.el-divider--horizontal {
    margin: 0;
    /* 移除默认的 margin */
    color: #13227a;
}

.title {
    margin-left: 10px;
    /* 添加左边距 */
}

.header-right {
    display: flex;
    /* 使右侧内容为flex布局 */
}

.title2 {
    margin-left: 30%;
    /* 添加左边距 */
}

.title3 {
    margin-left: 27.5%;
    /* 添加左边距 */
}

.submit-button {
    background-color: #1a3a8b;
    margin-left: 1%;
    height: 95%;
    width: 7%;
    margin-right: 0.3%;
    color: white;
    border: 1px solid #ffffff;
    cursor: pointer;
    border-radius: 5px;
}

.submit-button:hover {
    background-color: #b3b4b5;
}


.assignment-content {
    height: 90%;
    padding: 20px;
    background-color: #f9f9f9;
}

.textarea {
    width: 98%;
    height: 50%;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

.assignment-actions {
    height: 13%;
    margin-top: 2%;
    margin-bottom: 1%;
    display: flex;
}

.input-button {
    background-color: #1a3a8b;
    color: white;
    border: none;
    float: left;
    width: 12%;
    height: 12lvh;
    padding: 5px 10px;
    border-radius: 5px;
}

.input-button:hover {
    background-color: #b3b4b5;
}

.attachment-button {
    background-color: #d6dae2;
    margin-left: 1%;
    color: rgb(12, 12, 12);
    border: none;
    width: 12%;
    padding: 5px 10px;
    float: left;
    border-radius: 5px;
}

.attachment-button:hover {
    background-color: #b3b4b5;
}

.correct_button {
  margin-left: 4%;
  width: 92%;
  height: 10lvh;
}
.correct_button1 {
  margin-left: 25%;
  width: 12.5%;
  height: 90%;
  font-size: 24px;
  background-color: #13227A;
  color: white;
  border: 1px solid #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.correct_button1:hover {
  background-color: rgb(202, 124, 124);
}
</style>